<template>
  <!-- 标签选项框 -->
  <view class="SelectTagBox">
    <view class="SelectOptions">
      <view
        :class="['selectInput', showTagList ? 'selectActive' : '']"
        @click="showTagList = !showTagList"
      >
        <image
          src="../../static/icons/arrow.png"
          :class="['arrow', showTagList ? 'arrowActive' : '']"
        ></image>
        <view
          class="tagItemBox"
          v-for="(item, index) in chooseTag"
          :key="index"
        >
          <view>{{ item }}</view>
          <view class="removeTag" @click.stop="removeTag(index)">x</view>
        </view>
      </view>
      <!-- 标签下拉框 -->
      <view :class="['tagList', showTagList ? 'tagListActive' : '']">
        <scroll-view scroll-y="true" class="scrollY">
          <view
            :class="['tagItem', verifyRepeat(item) ? 'tagItemActive' : '']"
            v-for="(item, index) in componentList"
            :key="index"
            @click="addTag(item)"
            >{{ item }}</view
          >
        </scroll-view>
      </view>
    </view>

    <!-- 添加自定义标签 -->
    <view class="addTag">
      <view class="tip">添加自定义标签：</view>
      <input
        type="text"
        class="tagInput"
        v-model="addTagValue"
        @blur="handleAddYourTag"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: "SelectTagBox",
  props: {
    tagList: {
      type: Array,
      required: true,
    },
    maxNumber: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      showTagList: false,
      componentList: [],
      chooseTag: [],
      addTagValue: "",
    };
  },
  computed: {
    verifyRepeat() {
      return function (item) {
        return this.chooseTag.includes(item);
      };
    },
  },
  mounted() {
    // 将用户传来的标签保存至组件中（方便操作）
    this.componentList = this.tagList;
  },
  methods: {
    // 输入框添加标签
    addTag(item) {
      // 判断标签重复
      if (this.chooseTag.includes(item)) {
        uni.showToast({
          title: "选择标签重复",
          icon: "error",
          duration: 1000,
        });
        return;
      }
      // 已有maxNumber - 1个标签，即添加maxNumber个标签时发出事件
      if (this.chooseTag.length === this.maxNumber - 1) {
        this.chooseTag.push(item);
        this.$emit("chooseTagFinished", this.chooseTag);
        return;
      }
      // 不能超过设置的标签标签
      if (this.chooseTag.length === this.maxNumber) {
        uni.showToast({
          title: `最多选择${this.maxNumber}个`,
          icon: "error",
          duration: 1000,
        });
        return;
      }
      this.chooseTag.push(item);
    },

    // 移除输入框标签
    removeTag(index) {
      this.chooseTag.splice(index, 1);
    },

    // 添加自定义标签
    handleAddYourTag() {
      const yourTag = this.addTagValue;
      // 判断输入长度是否存在
      if (yourTag.trim().length) {
        // 标签长度限制
        if (yourTag.trim().length >= 7) {
          uni.showToast({
            title: "标签过长",
            icon: "error",
            duration: 1000,
          });
          this.addTagValue = "";
          return;
        }
        // 标签重复限制
        if (this.componentList.includes(yourTag)) {
          uni.showToast({
            title: "该标签已存在",
            icon: "error",
            duration: 1000,
          });
          return;
        } else {
          // 添加成功
          this.componentList.push(yourTag.trim());
          this.addTagValue = "";
          uni.showToast({
            title: "添加成功",
            icon: "success",
            duration: 1000,
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.SelectTagBox {
  width: 360rpx;
  height: 100%;
  .SelectOptions {
    position: relative;
    width: 100%;
  }
  .selectInput {
    position: relative;
    box-sizing: border-box;
    width: 360rpx;
    min-height: 60rpx;
    box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.3);
    border-radius: 10rpx;
    transition: all 0.5s;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10rpx 0;
    padding-right: 40rpx;
    .tagItemBox {
      display: flex;
      align-items: center;
      padding: 2rpx 8rpx;
      margin: 5rpx 10rpx;
      border-radius: 5rpx;
      background-color: #f4f4f5;
      color: #909399;
      border: 1px solid #e9e9eb;
      font-size: 26rpx;
      .removeTag {
        width: 26rpx;
        height: 100%;
        margin-left: 10rpx;
        margin-bottom: 5rpx;
        color: gray;
      }
    }
    .arrow {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      width: 30rpx;
      height: 30rpx;
      transition: all 0.5s;
    }
    .arrowActive {
      transform: rotateZ(180deg);
    }
  }
  .selectActive {
    box-shadow: 0 0 8rpx #05a47d;
  }

  .tagList {
    position: absolute;
    bottom: -270rpx;
    left: 0;
    width: 100%;
    height: 260rpx;
    border-radius: 8rpx;
    box-sizing: border-box;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
    background-color: #fff;
    color: #606266;
    font-size: 30rpx;
    z-index: 999;

    // overflow: auto;
    transition: all 0.5s;
    opacity: 0;
    transform: scale(0);
    .scrollY {
      height: 100%;
    }
    .tagItem {
      padding: 10rpx 20rpx;
    }
    .tagItem:active {
      background-color: #f5f7fa;
    }
    .tagItemActive {
      color: #05a47d;
      font-weight: 700;
      background-color: #f5f7fa;
    }
  }
  .tagListActive {
    opacity: 1;
    transform: scale(1);
  }

  .addTag {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
    .tip {
      font-size: 26rpx;
      color: #999;
    }
    .tagInput {
      width: 140rpx;
      height: 40rpx;
      box-sizing: border-box;
      border-radius: 10rpx;
      box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.3);
      padding: 10rpx 20rpx;
      color: #999;
      font-size: 28rpx;
    }
  }
}
</style>
